<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看博客</title>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/ViewBlog.css">
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href="../editormd/css/editormd.min.css">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
    <script src="../editormd/editormd.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！!</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--导航栏--->
<nav class="navbar navbar-default nav_bottom" style="position: fixed">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav nav-title">
                <li><a href="#" style="font-weight: bold;color: #999999;font-size: 25px">审核博客</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="user-head-icon">
                    <div class="drop-box" style="display: none;">
                        <div class="drop-nickname-box">
                            <div class="drop-nickname">
                            </div>
                            <div style="width: 100%;height: 2px">
                                <hr style="width: 100%;">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--文章主界面-->
<div class="article-big-box">
    <div class="article-box" style="margin-left: 50px">
        <!--文章左侧边栏-->
        <div  class="article_side_left_box">
            <!--作者模块-->
            <div class="article-author-box" style="height: 380px">
                <!--标题-->
                <div class="author-title-box">
                    <div class="author-title">
                        博客作者
                    </div>
                    <div class="hr-line">
                    </div>
                </div>
                <!--作者头像-->
                <div class="author-avatar-box">
                    <img src="" alt="" class="author-avatar">
                </div>
                <!--作者昵称-->
                <div class="author-name-box">
                    作者昵称
                </div>
                <!--作者成就-->
                <div class="author-success">
                    <div class="success-item-box">
                        <div class="blog_self_count">0</div>
                        <div class="success-item-info">原创</div>
                    </div>
                    <div class="success-item-box">
                        <div class="fans_count">0</div>
                        <div class="success-item-info">粉丝</div>
                    </div>
                    <div class="success-item-box">
                        <div class="support-count">0</div>
                        <div class="success-item-info">获赞</div>
                    </div>
                    <div class="success-item-box">
                        <div class="comment-count">0</div>
                        <div class="success-item-info">评论</div>
                    </div>
                    <div class="success-item-box">
                        <div class="collection-count">0</div>
                        <div class="success-item-info">收藏</div>
                    </div>
                </div>
            </div>

        </div>

        <!--正文部分-->
        <div class="article-content-box">
            <!--文章基本信息-->
            <div class="article-base-info-box">
                <!--标题信息-->
                <div class="article-title-box">
                    <div class="is-original-box">
                        原创
                    </div>
                    <div class="article-title">
                        文章标题
                    </div>
                </div>
                <!--标签、分栏等信息-->
                <div class="article-info-big-box">
                    <div class="article-info-box">
                        <div class="article-time">
                            <span class="glyphicon glyphicon-time" aria-hidden="true"></span>于
                            <span class="article-create-time">2022-08-01 :07:59:26</span>
                            发布
                        </div>
                        <div class="article-info">
                            <div class="column-title">分类专栏:</div>
                            <div class="column-list">
                            </div>
                            <div class="column-title">文章标签：</div>
                            <div class="label-list">
                            </div>
                        </div>
                    </div>
                </div>
                <!--文章内容-->
                <div class="article-main-content-box">
                    <div class="article-content" id="markdown-body">

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="../editormd/lib/marked.min.js"></script>
<script>
    let contentEditor;
    let md_code;
    let blog_id;
    let author_id;
    $(function () {
        /*获取博客id*/
        const href=decodeURI(window.location.href);//译码
        let hrefIndex=href.split('?blog_id=');
        blog_id=hrefIndex[1];
        get_article_content();
    })


    /*展示分栏*/
    function push_column_list(column_name) {
        $(".column-list").append(`<div class="column-item">
              ${column_name}
          </div>`);
    }

    /*展示标签*/
    function push_label_list(label_name) {
        $(".label-list").append(`<div class="label-item">
              ${label_name}
          </div>`);
    }

    /*获取文章信息*/
    function get_article_content() {
        let url='http://localhost:8080/articleServlet?action=get_blog_info'
        axios({
            method: "GET",
            url:url,
            params:{
                id:blog_id,
            }
        }).then(function (res) {
            let data = res['data'];
            $(".is-original-box").text(data['data']['is_original']);
            $(".article-title").text(data['data']['article_title']);
            $(".article-create-time").text(data['data']['create_time']);
            $(".support-number").text(data['data']['support_count']);
            $(".collection-number").text(data['data']['collection_count']);
            $(".comment-number").text(data['data']['comment_count']);
            md_code=data['data']['article_content'];
            author_id=data['data']['article_author'];
            get_author_info();
            get_article_column();
            get_article_label();
            editormd.markdownToHTML("markdown-body",{
                markdown:md_code,
                htmlDecode:"style,script,iframe",
                tocm:true,
                emoji:true,
                taskList:true,
                tex:true,
                flowChart:true,
                sequenceDiagram:true,
            });
        })
    }

    /*获取文章标签*/
    function get_article_label() {
        let url='http://localhost:8080/articleServlet?action=get_blog_label'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
            }
        }).then(function (res) {
            let data=res['data']['data'];
            $(".label-list").empty();
            for(let i in data){
                push_label_list(data[i]);
            }
        })
    }

    /*获取分类专栏*/
    function get_article_column() {
        let url='http://localhost:8080/articleServlet?action=get_blog_column'
        axios({
            method: "GET",
            url:url,
            params:{
                blog_id:blog_id,
            }
        }).then(function (res) {
            let data=res['data']['data'];
            $(".column-list").empty();
            for(let i in data){
                push_column_list(data[i]);
            }
        })
    }

    /*获取作者信息*/
    function get_author_info() {
        let url='http://localhost:8080/userServlet?action=get_author_info'
        axios({
            method: "GET",
            url:url,
            params:{
                author_id:author_id,
                self_id:window.localStorage.getItem("email")
            }
        }).then(function (res) {
            console.log(res);
            let data = res['data'];
            $(".author-avatar").attr("src",data['data']['headpicture']);
            $(".author-name-box").text(data['data']['nickname']);
            $(".blog_self_count").text(data['data']['blog_count']);
            $(".fans_count").text(data['data']['fans_number']);
            $(".support-count").text(data['data']['support_number']);
            $(".collection-count").text(data['data']['collection_number']);
            $(".comment-count").text(data['data']['comment_number']);
        })
    }

    /*模态框函数*/
    function modal(content) {
        $('.modal-body').html(content);
        $("#myModal").modal("show");
    }

</script>
</body>
</html>